<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="click">点击我</button>
    <!--设置点击事件更改msg-->
    <button @click="changeMsg">点击我更改msg数据</button>
    <p>我是mixin中的data，{{msg}}</p>
    <!--引入组件-->
    <MixinDemo :name="name">
    <!--具名插槽-->
        <template slot="center"></template>
        <template v-slot:footer></template>
    <!--作用域插槽-->
        <template slot-scope="scope">
            <div> {{scope.row}}</div>
        </template>
        <template slot-scope="scope">
            <p>{{scope}}</p>
        </template>
    </MixinDemo>
  </div>
</template>
<script>
  import { mixins } from "../mixin/index"
  import MixinDemo from "./mixinDemo"
  export default {
      name: "About",
      mixins: [mixins], // 引入
      components: {
          MixinDemo
      },
      data() {
          return {
              name: ['彭于晏', '吴彦祖', '刘亦菲']
          }
      },
      created() {
          console.log("组件调用minxi数据", this.msg);
      },

      mounted() {
          console.log("我是组件的mounted生命周期函数")
      },
      // 通过上面的代码和效果我们可以得出以下几点：
      // mixin中的生命周期函数会和组件的生命周期函数一起合并执行。
      // mixin中的data数据在组件中也可以使用。
      // mixin中的方法在组件内部可以直接调用。
      // 生命周期函数合并后执行顺序：先执行mixin中的，后执行组件的
      methods: {
          changeMsg() {
              this.msg = "我是要更改的msg";
              console.log("更改后的msg:", this.msg);
          }
      }
  }
</script>
